<template>
  <div>
    <div>
      <div class="box">
        <div class="imageBox" v-if="this.courseware.type==='pdf'">
          <el-image
              class="image"
              :src="require('@/assets/image/pdfpdf.jpeg')"
              :fit="contain"></el-image>
        </div>
        <div class="imageBox" v-else-if="this.courseware.type==='ppt'">
          <el-image
              class="image"
              :src="require('@/assets/image/pptppt.jpeg')"
              :fit="contain"></el-image>
        </div>
        <div class="imageBox" v-else>
          <el-image
              class="image"
              :src="require('@/assets/image/filefile.jpg')"
              :fit="contain"></el-image>
        </div>
        <div class="box2">
          <div class="title-box">

            <p class="title">{{ name }}</p>

          </div>
          <div class="type-box">
            <span class="span-tip">格式：</span><span class="span-text">{{ courseware.type }}</span>
          </div>
          <div class="type-box">
            <span class="span-tip">大小：</span><span class="span-text">{{ courseware.size }}</span>

          </div>
          <div class="type-box">
            <span class="span-tip">来源：</span><span class="span-text">{{ user.alias }}</span>
          </div>
        </div>
        <div class="bottom-box">
          <el-button type="" size="small" style="margin-left: 20px;margin-top: 8px" @click="showInfo">
            查看介绍
          </el-button>
          <el-button type="primary" size="small" style="margin-left: 90px;margin-top: 8px" @click="openPreview">
            点击预览
          </el-button>
          <el-button type="primary" size="small" style="margin-left: 100px;margin-top: 8px" @click="downloadFile">
            点击下载
          </el-button>
        </div>
      </div>
    </div>

    <el-dialog
        title="预览(预览只支持前几页，如需要请下载)"
        :visible.sync="dialogVisible"
        width="80%"
    >

      <div class="pre-box">
        <vue-office-pdf :src="pdfUrl" v-if="courseware.type==='pdf'"/>
        <vue-office-docx :src="pdfUrl" v-if="courseware.type==='docx'"/>
      </div>


      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="介绍"
        :visible.sync="infoVisible"
        width="60%"
    >

    <p>{{courseware.info}}</p>


      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="infoVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import {findById} from "@/api/user";
import {downloadCourseware} from "@/api/courseware";
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeDocx from '@vue-office/docx'

export default {
  name: 'CoursewareCard',
  components: {VueOfficePdf, VueOfficeDocx},
  props: {
    courseware: {
      type: Object,
      default: {}
    },
    user: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      name: '',
      dialogVisible: false,
      infoVisible:false,
      pdfUrl: '',
      pptOptions: {
        source: ''
      }
    }

  },
  watch: {
    courseware: {
      handler(newVal, oldVal) {
        if (this.courseware.name.length > 22) {
          this.name = this.courseware.name.slice(0, 22) + "...";
        } else {
          this.name = this.courseware.name
        }
        this.courseware.size = this.computeSize(this.courseware.size);
        this.getUserById()
      }
    }
  },
  mounted() {
    if (this.courseware.name.length > 22) {
      this.name = this.courseware.name.slice(0, 22) + "...";
    } else {
      this.name = this.courseware.name
    }
    this.courseware.size = this.computeSize(this.courseware.size);
    this.getUserById()

  },
  methods: {
    showInfo(){
      this.infoVisible=true
    },
    openPreview() {
      var set = new Set();
      set.add('pdf');
      set.add('docx');

      //1.不支持预览的格式
      if (!set.has(this.courseware.type)) {
        this.$message.warning("文件格式不支持预览！")
        return;
      }
      this.preview()
      this.dialogVisible = true
    },
    preview() {
      downloadCourseware(this.courseware.id).then(response => {
        const blob = new Blob([response.data], {type: 'application/pdf'});
        this.pdfUrl = URL.createObjectURL(blob);
        this.pptOptions.source = this.pdfUrl
      })
    },
    downloadFile() {
      // const response = downloadCourseware(this.courseware.id);
      downloadCourseware(this.courseware.id).then(response => {
        console.log(response)
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', this.courseware.name);
        document.body.appendChild(link);
        link.click();
        link.remove();
      })
      // console.log(response)


    },
    getUserById() {
      findById(this.courseware.userId).then(res => {
        this.user = res.data
        if (this.user.alias.length > 22) {
          this.user.alias = this.user.alias.slice(0, 22) + "...";
        }

      })
    },

    computeSize(fileSize) {
      if (fileSize >= 1024 * 1024) {
        return (fileSize / (1024 * 1024)).toFixed(2) + ' MB';
      } else if (fileSize >= 1024) {
        return (fileSize / 1024).toFixed(2) + ' KB';
      } else {
        return fileSize + ' B';
      }
    }
  }
}
</script>

<style scoped>
.pre-box {
  max-height: 1720px;
  overflow: hidden;
}

.box {
  width: 500px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
}

.imageBox {
//display: inline-block;
}

.box2 {

  width: 325px;
  height: 125px;
//display: inline-block;
}

.title-box {
  margin: auto;
  margin-left: 30px;

  width: 340px;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;

}

.title {
  margin: auto;
}

.type-box {
  margin: auto;
  margin-top: 5px;
  margin-left: 40px;
  width: 350px;
  height: 25px;


}

.image {
  border: 1px skyblue solid;
  width: 125px;
  height: 125px;
}

.title {
  font-size: 14px;
  color: #167df0;
}

.span-tip {
  color: #167df0;
}

.span-text {
  text-overflow: ellipsis;
}

.text {
  font-size: 12px;
}

.bottom-box {
  height: 40px;
  width: 500px;
}

</style>
